{%extend name="home/layout/layout"/%}
{%block name="header"%}
{%/block%}
{%block name="content"%}

<div class="container" style="max-width: 750px">
    <div class="row">
        <div id="goods_img" class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                {%volist name="goodsInfo.goods.goods_img" id="vo"%}
                {%if condition="($key == 0)"}%}
                <div class="item active"><img class="img-responsive" src={%$vo%}></div>
                {%else /%}
                <div class="item"><img class="img-responsive" src={%$vo%}></div>
                {%/if%}
                {%/volist%}
            </div>

            {%gt name="goodsInfo.goods.goods_img|count" value="1"%}
            <ol class="carousel-indicators">
                {%volist name="goodsInfo.goods.goods_img" id="vo"%}
                {%if condition="($key == 0)"}%}
                <li data-target="#goods_img" data-slide-to={%$key%} class="active"></li>
                {%else /%}
                <li data-target="#goods_img" data-slide-to={%$key%}></li>
                {%/if%}
                {%/volist%}
            </ol>
            <a class="left carousel-control" href="#goods_img" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#goods_img" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
            {%/gt%}

        </div>
    </div>
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-body">
                <div><strong>{%$goodsInfo.goods.goods_name%}</strong></div>
                <div class="row">
                    <div class="col-xs-12">
                        <span style="color: red"><small>¥&nbsp;{%$goodsInfo.goods.shop_price%}</small></span>
                            <span><small class="ms_grey_color"><s>市场价:{%$goodsInfo.goods.market_price%}</s>
                            </small></span>
                        <span class="label label-success"><small>{%$goodsInfo.goods.discount%}折</small></span>
                        <small class="ms_grey_color pull-right">已有{%$goodsInfo.goods.is_on_sale%}购买</small>
                        <span class="glyphicon glyphicon-user pull-right "></span>
                    </div>

                </div>
                {%volist name="goodsInfo.coupon" id="vo" empty="暂时没有数据" %}
                <div style="margin-top: 1px"><span class="label label-warning">{%$vo.coupon_name%}</span> <span
                        class="ms_grey_color">{%$vo.desc%}</span></div>
                {%/volist%}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-4" style="padding-right: 0px">
                        <img src="/static/home/pages/share/goods/ok.png" align="absmiddle">
                        <small>正品保障</small>
                    </div>
                    <div class="col-xs-4" style="padding-right: 0px">
                        <img src="/static/home/pages/share/goods/ok.png" align="absmiddle">
                        <small>七天包换</small>
                    </div>
                    <div class="col-xs-4" style="padding-right: 0px">
                        <img src="/static/home/pages/share/goods/ok.png" align="absmiddle">
                        <small>专属包装</small>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="row">
        <div class="panel panel-default ">
            <div class="panel-heading">
                <h2 class="panel-title">商品评价 <span class="ms_grey_color">({%$commentInfo.total%})</span></h2>
            </div>
            <div class="panel-body">
                <span class="ms_grey_color">综合评分：{%$commentInfo.avg%}</span>
                {%neq name="$commentInfo.avg" value="5"%}
                <label class="glyphicon glyphicon-star-empty pull-right" style="color: #f3e039"></label>
                {%/neq%}
                {%for start="0" end="$commentInfo.avg|intval"%}
                <label class="glyphicon glyphicon-star pull-right" style="color: #f3e039"></label>
                {%/for%}

            </div>
            <ul class="list-group">
                {%volist name="$commentInfo.list" id="vo"%}
                <li class="list-group-item">
                    <div>
                        {%for start="0" end="$vo.comment_rank"%}
                        <label class="glyphicon glyphicon-star" style="color: #f3e039"></label>
                        {%/for%}
                        <small class="pull-right ms_grey_color">{%$vo.user_name%} &nbsp;&nbsp;{%$vo.add_time%}</small>
                    </div>
                    <div>
                        <small>{%$vo.content%}</small>
                    </div>
                </li>
                {%/volist%}
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="panel panel-default ">
            <div class="panel-heading">
                <h3 class="panel-title">商品详情</h3>
            </div>
            {%volist name="goodsInfo.goods.goods_desc" id="vo"%}
            <div style="padding: 0 2px;">
                <img class="img-responsive" src={%$vo%}>
            </div>
            {%/volist%}
        </div>
    </div>
    <div class="row">
        <p>&nbsp;</p>
    </div>
</div>
{%/block%}